<template>
  <div>
    <!-- 条件查询 -->
    <div class="head-container">
      <div>
        <el-select
          v-model="query.templatePkId"
          clearable
          placeholder="模板名称"
          class="filter-item"
          style="width: 200px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in contrastTemplate" :key="item.pkId" :label="item.name" :value="item.pkId" />
        </el-select>

        <el-select
          v-model="query.status"
          clearable
          placeholder="对比状态"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
    </div>

    <el-table
      ref="table"
      :data="crud.data"
      max-height="500"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column prop="templateName" label="模板名称" :show-overflow-tooltip="true" min-width="95px" />
      <el-table-column prop="contrastScene" label="对比场景" :show-overflow-tooltip="true" min-width="90px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.contrastScene==='today'" size="small">
            当天
          </el-tag>
          <el-tag v-if="scope.row.contrastScene==='yesterday'" size="small">
            昨天
          </el-tag>
          <el-tag v-if="scope.row.contrastScene==='endOfLastMonth'" size="small">
            上月末
          </el-tag>
          <el-tag v-if="scope.row.contrastScene==='full'" size="small">
            全表数据
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dataRange" label="比对数据量">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.dataRange==='total'" size="small">
            全量
          </el-tag>
          <el-tag v-if="scope.row.dataRange==='sample'" size="small">
            抽样
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="contrastType" label="是否周期" :show-overflow-tooltip="true" min-width="70px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.contrastType==='cycle'" size="small">
            是
          </el-tag>
          <el-tag v-if="scope.row.contrastType==='manual'" type="success" size="small">
            否
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="cronExpressions" label="Cron表达式" :show-overflow-tooltip="true" min-width="90px">
        <template slot-scope="scope">
          <p v-if="scope.row.cronExpressions===null"> 非周期执行 </p>
          <p v-if="scope.row.cronExpressions!==null"> {{ scope.row.cronExpressions }} </p>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('status')" label="比对状态" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 'TODO'" type="info">待比对</el-tag>
          <el-tag v-if="scope.row.status === 'PROCESSING'">比对中</el-tag>
          <el-tag v-if="scope.row.status === 'FINISH'" type="success">完成</el-tag>
          <el-tag v-if="scope.row.status === 'STOPPED'" type="warning">停止</el-tag>
          <el-tag v-if="scope.row.status === 'FAIL'" type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('total')" prop="total" label="比对进度" :show-overflow-tooltip="true" min-width="270px">
        <template slot-scope="scope">
          <el-tag type="info">总数: {{ scope.row.contrastTotal }}</el-tag>
          <el-tag type="success" style="margin: 0px 5px">比对成功: {{ scope.row.contrastSuccessCount }}</el-tag>
          <el-tag type="danger">比对失败: {{ scope.row.contrastFailCount }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" :show-overflow-tooltip="true" min-width="140px" />
      <el-table-column prop="endTime" label="结束时间" :show-overflow-tooltip="true" min-width="140px" />
      <el-table-column label="操作" min-width="140px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 'PROCESSING'" size="mini" type="text" icon="el-icon-view" @click="stopTask(scope.row)">停止</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="toShowResult(scope.row)">查看结果</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination />

    <el-dialog
      v-if="contrastResultFlag"
      append-to-body
      :close-on-click-modal="false"
      :before-close="cancelCU"
      :visible.sync="contrastResultFlag"
      title="跨库比对结果"
      width="1200px"
      top="5vh"
    >
      <contrast-result ref="result" :contrast-task-pk-id="contrastTaskPkId" :contrast-run-log-pk-id="contrastRunLogPkId" style="max-height:660px;" />
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/expand/data/contrast/task/CRUD.operation.vue'
import contrastRunLogApi from '@/api/data/contrast/contrastRunLog'
import contrastTemplateApi from '@/api/data/contrast/contrastTemplate'
import pagination from '@crud/Pagination'
import contrastResult from './contrast-result'

const defaultCrud = CRUD({
  title: '跨库比对记录',
  url: 'api/cross/db/contrast/run/log',
  crudMethod: { ...contrastRunLogApi }
})
const defaultForm = {}

export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { crudOperation, rrOperation, pagination, contrastResult },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    taskPkId: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      statusOptions: [
        { key: 'TODO', label: '待比对' },
        { key: 'PROCESSING', label: '比对中' },
        { key: 'STOPPED', label: '停止' },
        { key: 'FINISH', label: '完成' },
        { key: 'FAIL', label: '失败' }
      ],
      contrastTemplate: [],
      contrastResultFlag: false,
      contrastResultData: {},
      contrastTaskPkId: '',
      contrastRunLogPkId: '',
      runLogData: {}
    }
  },
  created() {
    // 重置搜索
    this.crud.resetQuery()
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.taskPkId = this.taskPkId
      this.getTemplate()
    },
    // 获取模板信息
    getTemplate() {
      const param = { sourceAttribute: 'source', size: 500 }
      contrastTemplateApi.findListByPage(param).then(data => {
        this.contrastTemplate = data.content
      })
    },
    // 查看对比结果
    toShowResult(row) {
      this.contrastTaskPkId = row.taskPkId
      this.contrastRunLogPkId = row.pkId
      this.contrastResultFlag = true
    },
    stopTask(row) {
      contrastRunLogApi.stop(row.pkId, row.taskPkId).then(() => {
        this.crud.notify('停止比对成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.crud.toQuery()
      }).catch(() => {
        this.crud.notify('停止比对失败', CRUD.NOTIFICATION_TYPE.ERROR)
      })
    },
    cancelCU() {
      this.contrastResultFlag = false
    }
  }
}
</script>

